react-queryのError Handling

fetch中にerrorが生じた際に、どういう風にしてViewを表示するか

参考

isErrorになった時のviewどうしようかな〜、となった時に初めて考慮すればいいmrsekut.icon

error handling

defaultのisErrorのデメ

backgroundでrefetchし、それがerrorになったときもtrueになる

if(hoge.isError) return {..}と書いていれば、backgroundでerrorになっただけなのに、Viewが壊れる

非同期処理のerrorrは補足してくれないので、

errorをcatchしたら、次のrendering時にerrorをthrowすることで、Error Boundaryが捕捉してくれる

これをやるために、useErrorBoundaryをtrueにするだけでいい

こうすれば、Component内で、isErrorを書かなくて良くなる

code:ts

Copygranular-error-boundaries: copy code to clipboard

useQuery('todos', fetchTodos, {

// 🚀 only server errors will go to the Error Boundary

useErrorBoundary: (error) => error.response?.status >= 500,

})

errorの種類によっても切り替えられる

こうすれば例えば

4xxの時は、isErrorでComponent内で処理して、

5xxの時は、Error Boundaryに捕捉してもらう

のようにできる

globalのquery clientのonErrorでtoastを出すと便利

記事の著者的には

backgroundのrefetchのerrorは、globalなtoastで表示

他のerrorは、

local componentで処理するか、

Error Boundaryで処理する

宣言敵云々

dataは、value|nullになるのがだるい

isLoadingを意識しないといけない